<template>
  <div class="main">
    <el-form ref="form" :model="form"  label-width="160px">
      <el-form-item label="书籍id" required>
        <el-input v-model="form.bookId"/>
      </el-form-item>
      <el-form-item label="书籍" required>
        <el-button native-type="file">上传文件 </el-button>
        <span style="margin-left:10px;text-decoration:underline">{{ form.file && form.file.name}}</span>
        <input type="file" @change="uploadFile" :style="uFileBtnStyle" mutiple="multiple"/>
      </el-form-item>
      <el-form-item label="书籍是否可拆分" required>
        <el-switch v-model="form.canSplit" @change="changeSplitStatus"></el-switch>
      </el-form-item>
      <el-form-item label="章节分隔符" required v-if="form.canSplit">
        <el-input v-model="form.delimiter"/>
      </el-form-item>
      <el-form-item label="理论章节数" v-if="form.canSplit">
        <el-input v-model="form.chaptersNum"/>
        <!-- <div style="color:red;">用户校验代码分割的章节数跟理论值是否一致，避免数据库插入错误数据被</div> -->
      </el-form-item>
      <el-form-item>
        <el-button @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
    
  </div>
</template>
<script>
import { uploadBookToServer } from '@/api/book'
export default {
  data(){
    return {
      form:{
        canSplit:true,
        bookId:this.$route.query.bookId,
        file: null,
        delimiter:'^\\s*(前言|第[0-9一二三四五六七八九十]{1,3}[回章]|后记)',
        chaptersNum:'',
        classifyId:this.$route.query.classifyId
      },
      uFileBtnStyle:{
        position:'absolute',
        top:'0',
        left:'0',
        width:'100px',
        height:'40px',
        opacity:0
      }
    }
  },
  methods: {
    handleExceed(){
      this.$message('文件超出了个数限制')
    },
    uploadFile(fileEvent){
      let fileList = fileEvent.srcElement.files
      let file = fileList[0]
      if(file.type !== 'text/plain'){
        // 非txt文档，则不允许分章节
        this.$set(this.form,'canSplit',false)
      }
      this.$set(this.form,'file',file)
    },
    changeSplitStatus(){
      console.log('this.form.canSplit:',this.form.canSplit)
    },
    submit(){
      // 校验逻辑
      if(!this.form.bookId){
        this.$message.error('书籍id不能为空')
        return
      }
      if(!this.form.file){
        this.$message.error('书籍不能为空')
        return
      }
      if(this.form.canSplit && !this.form.delimiter){
        this.$message.error('章节分隔符不能为空')
        return
      }
      // 上传逻辑
      
      if(this.form.file){
        let formData = new FormData()
        formData.append('bookId',this.form.bookId)
        formData.append('canSplit',this.form.canSplit)
        formData.append('delimiter',this.form.delimiter)
        formData.append('chaptersNum',this.form.chaptersNum)
        formData.append('classifyId',this.form.classifyId)
        formData.append('file',this.form.file)
        // 上传
        uploadBookToServer(formData).then(res=>{
          if(res.code === 0){
            this.$message(
              {
                type:'success',
                message:res.msg
              }
            )
            this.$router.push('/library')
          }else{
            this.$message({
              type:'error',
              message:'上传书籍失败,' + res.msg
            })
          }
        })
      }else{
        this.$message.error('书籍不能为空')
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.main{
  padding-top:30px;
}
</style>